<template>
  <div id="enterprise-application" v-if="info">
    <c-title text="企业申请"></c-title>
    <div class="top-title">申请信息</div>
    <div class="enterprise-company">
      <!-- <van-field v-model="detailData.realname" required label="企业名称"  /> -->
      <div class="can-card">
        <div class="star-icon">*</div>
        <div class="can-top">
          <div class="can-name">企业名称</div>
          <div class="can-des">{{detailData.realname}}</div>
        </div>
      </div>
      <div class="license">
        <div class="license-name"><span class="star-sty">*</span>营业执照</div>
        <div class="license-img">
          <img :src="detailData.annex_file ? detailData.annex_file.corp_license_url : ''" alt="" />
        </div>
      </div>
      <!-- <van-field v-model="detailData.detail_info.corp_business_scope" required label="经营范围"  /> -->
      <div class="can-card">
        <div class="star-icon">*</div>
        <div class="can-top">
          <div class="can-name">经营范围</div>
          <div class="can-des">{{detailData.detail_info.corp_business_scope}}</div>
        </div>
      </div>
    </div>
    <div class="personal-info">
      <van-field v-model="detailData.detail_info.corp_legal_person" required label="法人"  />
      <van-field v-model="detailData.detail_info.corp_contact" required label="联系人"  />
      <van-field v-model="detailData.mobile" required label="联系方式"  />
      <div class="license">
        <div class="license-name"><span class="star-sty">*</span>上传身份证国徽面</div>
        <div class="license-img">
          <img :src="detailData.annex_file.id_card_reverse_url" alt="" />
        </div>
      </div>
      <div class="license">
        <div class="license-name"><span class="star-sty">*</span>上传身份证人像面</div>
        <div class="license-img">
          <img :src="detailData.annex_file.id_card_front_url" alt="" />
        </div>
      </div>
    </div>
    <div class="personal-info">
      <!-- <van-field v-model="detailData.detail_info.corp_address" required label="企业地址"  /> -->
      <div class="can-card">
        <div class="star-icon">*</div>
        <div class="can-top">
          <div class="can-name">企业地址</div>
          <div class="can-des">{{detailData.detail_info.corp_address}}</div>
        </div>
      </div>
      <div class="can-card">
        <div class="star-icon">*</div>
        <div class="can-top">
          <div class="can-name" style="margin-right: 3.8rem;">简介</div>
          <div class="can-des">{{detailData.detail_info.introduce}}</div>
        </div>
      </div>
      <!-- <van-field v-model="detailData.detail_info.introduce" required label="简介"  /> -->
      <div class="license">
        <div class="license-name"><span class="star-sty">*</span>公司照片</div>
        <div class="company-img">
          <!-- <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJU1SKoHsyXTQvV2mdPlOprjqeyJvTXTHkGJ1jj8S1bBcluV5a5ay6fYXic3SlVE6v652ia592ycxpw/132" alt="" /> -->
          <img :src="item" alt="" v-for="(item,index) in detailData.annex_file.corp_image_url" :key="index">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import index_controller from "./index_controller";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#enterprise-application {
  .top-title {
    margin: 0.875rem 0 0.925rem 0.525rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    text-align: left;
  }

  .enterprise-company {
    background: white;
    padding: 1rem 0.65rem;
  }

  .license {
    text-align: left;
    padding: 0 0.4rem;
    margin: 0.75rem 0 1rem 0;

    .license-name {
      font-size: 0.8rem;
      font-weight: 400;
      color: #646566;
      margin-bottom: 0.75rem;

      .star-sty {
        color: #fe5e56;
        // margin-right: 0.2rem;
      }
    }
  }

  .license-img {
    width: 8.15rem;
    height: 8.15rem;
    border: 0.05rem solid #dbdbdb;
    background: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      height: 6rem;
      width: 100%;
      background: #f7f7f7;
      // border: 0.05rem solid #dbdbdb;
    }
  }

  .company-img {
    display: grid;
    grid-template-columns: 1fr 1fr;

    img {
      margin: 0 0.3rem 0.3rem 0;
      width: 9.15rem;
      height: 9.15rem;
    }
  }

  .personal-info {
    background: white;
    padding: 1rem 0.65rem;
    margin-top: 0.425rem;
  }
}

.can-card {
  display: flex;
  margin: 0.5rem 0.375rem;
  align-items: center;
}

.can-card .star-icon {
  vertical-align: super;
  color: #ee0a24;
}

.can-card .can-top {
  margin-left: 0.125rem;
  border-bottom: 0.025rem solid #ebedf0;
  display: flex;
  width: 100%;
  padding: 0.675rem 0;
}

.can-card .can-name {
  font-size: 0.8rem;
  color: #646566;
  margin-right: 2.35rem;
}

.can-card .can-des {
  width: 65%;
  white-space: nowrap;
  overflow-x: auto;
  text-align: left;
}
</style>
